<template>
	<view class="">
		<dio-loadPage :loadShow="loadShow"></dio-loadPage>
		<view id="main" v-show="!loadShow">
			<view class="main_body main_yellow_color">
				<view v-if="fixed_search" style="height: 82rpx;" :style="{marginTop: menuButtonInfo.top+'px'}">
					
				</view>
				<view :class="{fixed_search:fixed_search}" class="main_yellow_color" :style="{paddingTop: menuButtonInfo.top+'px'}">
					<view class="dio-row title">
						<view class="dio-column" style="position: relative;margin-top: 6rpx;">
							<image src="/static/icon/share.png" style="width: 50rpx;height: 50rpx;"></image>
							<button open-type="share" type="text" name="username" value="ss" disabled="true"
								style="position: absolute;top:4rpx;left:-2rpx;width: 50rpx;height: 50rpx;opacity: 0;z-index: 2;">
							</button>
						</view>
						
						<view class="dio-row search" style="justify-content: left;align-items: center;" @click="search">
							<image src="/static/icon/search.png" style="width: 36rpx;height: 36rpx;"></image>
							<text class="u-p-l-15">搜索你想要的机车</text>
						</view>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="">
					<swiper indicator-active-color="#ffdf00" :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1500" style="height: 240rpx;border-radius: 10rpx;">
						<swiper-item v-for="(item, index) in top_banner" :key="index">
							<view class="swiper-item">
								<image :src="item.image" mode="aspectFit" style="height: 240rpx;width: 705rpx;border-radius: 16rpx;" @tap.stop="topBannerTap(item)"></image>
								<!-- <view class="swiper-item-image"></view> -->
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 工具栏 -->
				<view class="dio-row" style="margin: 45rpx 0 50rpx 0;">
					<view class="dio-column" @tap="dio_product(item)" v-for="(item,index) in product_list" :key="index" style="justify-content: center;align-items: center;flex-basis: 20%;">
						<view class="" style="display: flex;">
							<image style="width: 84rpx;height: 84rpx;" :src="item.img" mode=""></image>
						</view>
						<view class="" style="font-size: 25rpx;color: #9900FF;margin-top: 20rpx;font-weight: 600;">
							{{item.name}}
						</view>
					</view>
				</view>
				<dio-recommend></dio-recommend>
				<!-- <view style="height: 20rpx;">
					
				</view> -->
			</view>
			<view class="recommend_box">
				<!-- <view class="" style="font-size: 80rpx;font-weight: 700;color: #CC00FF;font-family: STCaiyun;">
					推荐
				</view> -->
				<dio-waterfall :value="dlist">
					<template v-slot:left="{ leftList }">
						<view class="dio-column recommend_left_one" v-for="(item, index) in leftList" :key="item.key">
							<view class="dio-column recommend_left_box_tmp" @click="goToDetailPage">
								<image class="recommend_left_img" mode="widthFix" :src="item.src"></image>
								<view class="dio-column recommend_left_text_box" style="">
									<view class="two-line-word">
										法国代购法国代购法国代购法国代购法国代购法国代购法国代购
									</view>
									<view class="moeny_box">
										<view class="money_icon">
											￥
										</view>
										<view class="money_num">
											68888
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{ rightList }">
						<view class="dio-column recommend_left_one" v-for="(item, index) in rightList" :key="item.key">
							<view class="dio-column recommend_left_box_tmp" @click="goToDetailPage">
								<image class="recommend_left_img" mode="widthFix" :src="item.src"></image>
								<view class="dio-column recommend_left_text_box" style="">
									<view class="two-line-word">
										法国代购法国代购法国代购法国代购法国代购法国代购法国代购
									</view>
									<view class="dio-column moeny_box">
										<view class="money_icon">
											￥
										</view>
										<view class="money_num">
											68888
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</dio-waterfall>
				
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view id="foo_hr" class="" style="height:180rpx;"></view>
		<foo-bar @toIndex="toIndex" :home="0"></foo-bar>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	let isPreload = false;
	let time_old = new Date().getTime();
	import fooBar from '@/components/fooBar/fooBar.vue'
	export default {
		components: {
			fooBar
		},
		data() {
			return {
				fixed_search:false,
				menuButtonInfo: menuButtonInfo,
				scrollTop: 0,
				homeTop: 0,
				// 是否有网络
				loadShow:false,
				// 轮播图
				top_banner:[
					{
						image: 'http://create.adota.cn/armyimg/biexunbanner.png',
						type:"openC"
					},
					{
						image: 'http://cdn.adota.cn/huodongbanner600.png',
						type:"inner",
						url:"/pages/rbalance/rbalance"
					}
				],
				// 工具栏
				product_list: [{
					img: '/static/fl_1@2x.png',
					name: '玩法介绍',
					tip: 'js'
				},{
					img: '/static/toolsicon.png',
					name: '免费工具',
					tip: 'ft'
				}, {
					img: '/static/fl_3@2x.png',
					name: '邀请好友',
					tip: 'yq'
				}, {
					img: '/static/fl_4@2x.png',
					name: '高手交流群',
					tip: 'jl'
				}, {
					img: '/static/kuaishoubianxian.png',
					name: '快手变现',
					tip: 'qd'
				}],
				dlist:[
					{
						src:"https://img14.360buyimg.com/n0/jfs/t1/145689/35/1374/225708/5ef3042dE865bdb00/041f6975d856dcec.jpg"
					},
					{
						src:"/static/a.jpg"
					},
					{
						src:"/static/a.jpg"
					},
					{
						src:"https://img14.360buyimg.com/n0/jfs/t1/145689/35/1374/225708/5ef3042dE865bdb00/041f6975d856dcec.jpg"
					},
					{
						src:"/static/icon/jinbi.png"
					},
					
					{
						src:"/static/a.jpg"
					},
				]
			}
		},
		onPageScroll(e) {
			// 如果滑的太快也不查询节点
			let time_now = new Date().getTime();
			if (time_now - time_old < 400) {
				return
			}
			time_old = time_now;
			// 预防多次回调
			if (isPreload) {
				return
			}
			uni.createSelectorQuery().selectViewport().scrollOffset(rect=>{
				// 预防多次回调
				if (isPreload) {
					return
				}
				// console.log("位置查询",rect)
				// 视图高度减去滚动高度减去屏幕高度 = 底部距离 < 240 说明触底了要预加载数据
				if (rect.scrollHeight - rect.scrollTop - this.$DIOWININFO.screenHeight < 500) {
					// console.log("位置查询",rect)
					this.fixed_search = true
					this.loadBottomData("下滑")
				}
			}).exec()
		},
		onReachBottom() {
			this.loadBottomData("触底")
			// console.log(this.dlist)
		},
		onLoad() {
			uni.hideTabBar()
		},
		methods: {
			// 触底 和 预加载 函数
			loadBottomData(l){
				return
				if (isPreload) {
					return
				}
				isPreload = true
				console.log(l,"预加载数据")
				setTimeout(()=>{
					this.dlist = this.dlist.concat({
						src:"/static/icon/jinbi.png"
					},{
						src:"/static/icon/jinbi.png"
					},{
						src:"/static/a.jpg"
					})
					console.log(this.dlist.length)
					isPreload = false
				},400)
				
			},
			// 跳转详情页
			goToDetailPage(){
				uni.navigateTo({
					url:"/pages/detail/detail"
				});
			},
			toIndex(index) {
				let that = this
				that.index = index
				if (index == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (index == 1) {
					uni.switchTab({
						url: '/pages/center/center'
					})
				} else if (index == 2) {
					uni.switchTab({
						url: '/pages/list/list'
					})
				} else if (index == 3) {
					uni.switchTab({
						url: '/pages/user/user'
					})
				} else if (index == 4) {
					if (!that.vuex_user) {
						that.loginShow = true
						return
					}
					that.goToWrite()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.fixed_search {
		position: fixed;
		z-index: 9998;
		top: 0;
		left: 0;
		width: 100%;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title {
		position: relative;
		color: #fff;
		font-size: 18px;
		line-height: 80rpx
	}
	
	
	.search {
		width: 55%;
		background: #fff;
		height: 60rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
		padding-left: 20rpx;
		border-radius: 50px;
		margin-top: 1px;
		
		text {
			color: #a6a7a8;
			font-size: 14px
		}
	}
	.nav {
		background: #fff;
		border-radius: 18px 18px 0px 0px;
		margin-top: 3px
	}
	
	.nav .cu-item:nth-child(1) {
		margin: 0 10px
	}
	
	.nav .cu-item {
		height: 45px;
		display: inline-block;
		line-height: 45px;
		margin: 0 5px;
		padding: 0 8px
	}
	
	
	.recommend_box {
		background-color: #F0F0F0;
		border-radius: 26rpx;
		position: relative;
		top: -30rpx;
		padding: 20rpx 10rpx 0 10rpx;
		.recommend_left_one{
			margin-bottom: 16rpx;
			align-items: center;
		}
		.recommend_left_box_tmp{
			background-color: #FFF;
			border-radius: 10rpx;
			width: 96%;
		}
		.recommend_left_img{
			width: 100%;
			border-radius: 10rpx 10rpx 0 0;
		}
		.recommend_left_text_box{
			padding:10rpx 20rpx;
			.moeny_box {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				color: #EC5D29;
				margin-top: 5rpx;
				.money_icon{
					font-size: 24rpx;
					
				}
				.money_num {
					font-size: 40rpx;
				}
			}
		}
	}
	
</style>
